<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mydemo</title>
    <style type="text/css">
        html,body,#outer img {margin:0; padding:0;}
        /*这里用到font-sizez:0;是用来清除行内元素之间空白区的影响。而图片父元素使用padding：0 0 10px 10px
        和自身的margin:10px 10px 0 0;则可以看作是盒子布局的小技巧；*/
        #outer {width:560px;margin:0 auto;border:1px solid red;text-align: center;font-size:0;
            padding:0 0 10px 10px;overflow:hidden;zoom:1}
        #outer img {border:1px solid black;margin:10px 10px 0 0 ;cursor:crosshair;
            opacity:0.5; filter:alpha(opacity=50);
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oImg = document.getElementsByTagName("img");
            for(var i=0;i<oImg.length;i++) {
                oImg[i].onmouseover = function() {
                    this.style.cssText = "opacity:1.0;filter:alpha(opacity:100)";
                }
                oImg[i].onmouseout = function() {
                    this.style.cssText = "";
                }
            }
        }
    </script>
</head>
<body>
    <div id="outer">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
        <img src="1.jpg" alt="兰博基尼">
    </div>
</body>
</html>